<template>
  <!-- 背景 -->
  <img :src="musicList.al.picUrl" alt="" class="bgimg" />
  <!-- 歌词详情 -->
  <div class="detailTop">
    <!-- 左边 -->
    <div class="detaiToplLeft">
      <div class="icon">
        <!-- 返回上一级，因为，弹出是有updateDetailShow 这个函数控制的操作的是一个布尔值，所以只需要改布尔值状态即可 -->
        <img src="@/assets/img/左箭头(白).svg" alt="" @click="updateDetailShow" />
      </div>
      <!-- 歌曲名、作者名 -->
      <div class="leftMarquee">
        <!-- 歌名:使用到插件跑马灯的效果 marquee插件 -->
        <Vue3Marquee>
          {{ musicList.al.name }}
        </Vue3Marquee>
        <!-- 人名 -->
        <span v-for="item in musicList.ar" :key="item">
          {{ item.name }}
        </span>
        <!-- 右箭头图标 -->
        <div class="icon">
          <img src="@/assets/img/向右箭头.svg" alt="" />
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="detailTopRight">
      <!-- 分享 -->
      <div class="icon">
        <img src="@/assets/img/分享(白).svg" alt="" />
      </div>
    </div>
  </div>

  <!-- 歌词详情页中间部分 -->
  <div class="detailContent" v-show="!isLyricShow">
    <!-- 判断类：如果是播放状态，就添加类，isbtnShow：布尔值，是否是播放状态 -->
    <!-- 播放状态 -->
    <img src="@/assets/img/磁盘/磁针.png" alt="" class="img_needle" :class="{ img_needle_active: !isbtnShow }" />
    <img src="@/assets/img/磁盘/磁盘.png" alt="" class="img_cd" />
    <!-- 图片 -->
    <!-- 如果 isbtnShow 为 true 暂停动画， -->
    <img :src="musicList.al.picUrl" alt="" class="img_ar" :class="{ img_ar_active: !isbtnShow, img_ar_pauesd: isbtnShow }" @click="isLyricShow = true" />
  </div>

  <!-- 歌词部分 -->
  <div class="MusicLyric" ref="musicLyric" v-show="isLyricShow" @click="isLyricShow = false">
    <p v-for="item in lyric" :key="item" :class="{ active: currentTime * 1000 >= item.time && currentTime * 1000 <= item.pre }">{{ item.lrc }}</p>
  </div>

  <!-- 歌词详情底部部分 -->
  <div class="detailFooter">
    <!-- 上部分收藏等、图标 -->
    <div class="footerTop">
      <div class="icon">
        <img src="@/assets/img/喜爱(白).svg" alt="" />
      </div>
      <div class="icon">
        <img src="@/assets/img/下载-(白).svg" alt="" />
      </div>
      <div class="icon">
        <img src="@/assets/img/_唱歌(白).svg" alt="" />
      </div>
      <div class="icon">
        <img src="@/assets/img/评论(白).svg" alt="" />
      </div>
      <div class="icon">
        <img src="@/assets/img/更多(白).svg" alt="" />
      </div>
    </div>

    <!-- 中间部分 进度条 -->
    <div class="footerContent">
      <!-- 进度条末尾绑定歌曲当前时间 -->
      <!-- step:属性，设置每次移动多少距离 -->
      <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05" />
    </div>

    <!-- 底部部分 -->
    <div class="footer">
      <div class="icon">
        <img src="@/assets/img/循环播放(白).svg" alt="" />
      </div>
      <div class="icon">
        <img src="@/assets/img/上一首(白).svg" alt="" @click="goPlay(-1)" />
      </div>
      <!-- 播放 -->
      <div class="icon bf">
        <img src="@/assets/img/暂停(白).svg" alt="" @click="play" v-if="isbtnShow" />
        <img src="@/assets/img/播放(白).svg" alt="" @click="play" v-else />
      </div>

      <div class="icon">
        <img src="@/assets/img/下一个(白).svg" alt="" @click="goPlay(1)" />
      </div>
      <div class="icon">
        <img src="@/assets/img/列表(白).svg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { mapMutations, mapState } from 'vuex'

export default {
  data() {
    return {
      // 歌词 显示
      isLyricShow: false,
    }
  },
  // 接收父组件传递进来的值
  // 'playListIndex', 'playList' 这两个参数，默认是传的，但是 报错，属性名字冲突造成的影响，所以，又去掉了
  props: ['musicList', 'isbtnShow', 'play', 'addDuration'],
  // 生命周期，页面,渲染完成时
  mounted() {
    // 用于查看传进来的歌曲信息
    // console.log(this.musicList)
    // console.log(this.lyricList.lyric)
    // 页面渲染时，调用 歌曲总时长的函数
    this.addDuration()
  },
  // 方法
  methods: {
    // 切换歌曲
    goPlay: function (num) {
      let index = this.playListIndex + num
      if (index < 0) {
        index = this.playList.length - 1
      } else if (index == this.playList.length) {
        index = 0
      }
      this.updatePlayListIndex(index)
    },
    ...mapMutations(['updateDetailShow', 'updatePlayListIndex']),
  },
  // 计算属性
  computed: {
    ...mapState(['lyricList', 'currentTime', 'playListIndex', 'playList', 'addDuration', 'duration']),
    // 处理歌词，根据换行符切割，
    lyric() {
      // arr 是一个变量数组字面量，所以用 let，
      let arr
      // 判断是否为空
      if (this.lyricList.lyric) {
        // 使用 map 进行 循环
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          // 获取时间
          let min = item.slice(1, 3) // 分钟
          let sec = item.slice(4, 6) // 秒
          let mill = item.slice(7, 10) // 毫秒
          let lrc = item.slice(11, item.length) // 歌词
          let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          // 判断 如果 毫秒为 NaN ,下标就改变，取后面两个,，重新切割
          if (isNaN(Number(mill))) {
            let mill = item.slice(7, 9)
            lrc = item.slice(10, item.length)
            time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          }
          // 将这些数据 返回出去,是一个对象，以属性的形式
          // console.log(min, sec, Number(mill), lrc)
          return { min, sec, mill, lrc, time }
        })
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000
          } else {
            item.pre = arr[i + 1].time
          }
        })
      }
      console.log(arr)
      return arr
    },
  },
  // 侦听 页面距离
  watch: {
    // 监听 currentTime
    currentTime: function (newValue) {
      let p = document.querySelector('p.active')
      // console.log([p])
      // 拿到 p 之后才判断，防止拿不到数值，而报错
      if (p) {
        if (p.offsetTop > 300) {
          this.$refs.musicLyric.scrollTop = p.offsetTop - 300
        }
      }
      // 监听歌曲，当歌曲播放完自动播放下一首
      if (newValue === this.duration) {
        if (this.playListIndex === this.playList.length - 1) {
          // 重复播放
          this.updatePlayListIndex(0)
          // 手动播放
          this.play()
        } else {
          this.updatePlayListIndex(this.playListIndex + 1)
        }
      }
      // console.log(this.$refs.musicLyric)
    },
  },
  // 注册组件
  components: {
    Vue3Marquee,
  },
}
</script>

<style lang="less" scoped>
// 背景
.bgimg {
  width: 100%;
  height: 100%;
  // backdrop-filter: blur(10px);
  filter: blur(80px);
  // 绝对定位可以脱离文档流
  position: absolute;
  z-index: -1;
}

// 头部整体排版
.detailTop {
  width: 100%;
  height: 1rem;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;
  fill: #fff;
  margin-top: 1rem;

  // 左边
  .detaiToplLeft {
    display: flex;
    align-items: center;

    // 歌曲名、作者 整体布局
    .leftMarquee {
      width: 6rem;
      height: 100%;
      margin-left: 1rem;
      margin-top: 2.5rem;
      color: rgb(255, 255, 255);
      font-weight: 600;

      span {
        color: rgb(255, 255, 255);
      }
      .icon {
        display: inline-block;
        color: rgb(255, 255, 255);
        img {
          width: 1rem;
          height: 1.3rem;
          fill: rgb(255, 255, 255) !important;
        }
      }
    }
  }
}

// 中间磁盘部分
.detailContent {
  width: 100%;
  height: 9rem;
  display: flex;
  align-content: center;
  margin-top: 5rem;
  position: relative;
  margin-left: 2.2rem;
  // 磁针
  .img_needle {
    width: 7rem;
    height: 11rem;
    position: absolute;
    left: 35%;
    top: -35%;
    transform-origin: 0 0;
    transform: rotate(-9.5deg);
    transform: all 2s;
    transition: all 1.5s;
  }
  // 磁针动画
  .img_needle_active {
    width: 7rem;
    height: 11rem;
    position: absolute;
    left: 35%;
    top: -35%;
    transform-origin: 0 0;
    // -1
    transform: rotate(-1deg);
    transform: all 2s;
    // 缓慢动画
    transition: all 1.5s;
  }

  // 磁盘
  .img_cd {
    width: 17rem;
    height: 17rem;
    position: absolute;
    bottom: -11rem;
    right: 6rem;
    z-index: -1;
  }
  // 图片
  .img_ar {
    width: 11.2rem;
    height: 11.2rem;
    border-radius: 50%;
    position: absolute;
    right: 8.9rem;
    bottom: -8rem;
    // 调用动画：动画名称，10秒，匀速，无限循环
    animation: rotate_ar 12s linear infinite;
  }
}
// 播放动画
.img_ar_active {
  animation-play-state: running !important;
}
// 暂停动画
.img_ar_pauesd {
  animation-play-state: paused !important;
}
// 图片旋转动画
@keyframes rotate_ar {
  0% {
    // 围绕 z 轴旋转 0度
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

// 歌词
.MusicLyric {
  width: 100%;
  height: 66%;
  display: flex;
  // 垂直排列
  flex-direction: column;
  // 居中
  align-items: center;
  margin-top: 2.5rem;
  // 溢出部分 滚动
  overflow: scroll;
  p {
    color: rgb(167, 166, 166);
    margin-bottom: 0.8rem;
  }
  .active {
    color: #fff;
    font-size: 1.5rem;
  }
}

// 歌词详情底部部分
.detailFooter {
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .footerTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // 上下的间距
    position: absolute;
    top: -6rem;
    // margin-bottom: 2rem;
    // padding-bottom: 2rem;
    .icon {
      width: 0.36rem;
      height: 0.36rem;
      img {
        fill: rgb(245, 234, 234);
      }
    }
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      img {
        fill: rgb(245, 234, 234);
      }
    }
  }
  .range {
    width: 100%;
    height: 0.1rem;
    // margin-bottom: 1.5rem;
    position: absolute;
    top: -1rem;
  }
  .footer {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      fill: rgb(245, 234, 234);
    }
    // 播放按钮
    .bf {
      img {
        width: 3rem;
        // height: 2rem;
      }
    }
  }
}
</style>
